<!--
 * @Descripttion:
 * @version:
 * @Author: cxguo
 * @Date: 2020-03-10 20:49:27
 * @LastEditors: cxguo
 * @LastEditTime: 2020-11-12 10:05:47
 -->
<template>
  <el-select
    v-model="insideVal"
    remote
    clearable
    @change="onChange"
  >
    <el-option
      v-for="item in optionsData"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
      <span>{{ item.label }}</span>
    </el-option>
  </el-select>
</template>

<script>
import { options } from '@/api/bsd/account.js'
import store from '@/store'

export default {
  components: {},
  props: {
    value: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      optionsData: [],
      appData: store.getters.appData,
      insideVal: null
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
    this.insideVal = this.value
    this.getListData()
  },
  mounted() {
  },
  methods: {
    getListData() {
      options().then(res => {
        if (res.data.flag) {
          const data = res.data.data
          this.optionsData = data
          this.handleDefaultData(data)
        }
      }).catch(err => {
        console.log(err)
      })
    },
    handleDefaultData(optionsData = []) {
      const targetObj = optionsData.find(item => { return item.isDefault === '1' })
      if (targetObj) {
        const value = targetObj.value
        this.insideVal = value
        this.$emit('input', value)
        return
      }
      if (optionsData.length > 0) {
        const targetObj = optionsData[0]
        const value = targetObj.value
        this.insideVal = value
        this.$emit('input', value)
      } else {
        const value = null
        this.insideVal = value
        this.$emit('input', value)
      }
    },
    onChange(val) {
      this.$emit('input', val)
    }
  }
}
</script>

<style scoped>

</style>
